<template lang="">
    <div>
        <div class="title">批量上传</div>
        <el-upload class="upload-demo" ref="upload" drag action="#" :limit="1" :with-credentials="true"
            accept=".xls,.xlsx" :file-list="fileList" :http-request="toUpload" name="file">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">在这里上传想要批量导入的名单，仅支持excel文件</div>
            <div class="el-upload__tip" slot="tip" v-show="uploading">推荐您使用我们提供的模板进行批量上传，点击<el-link
                    href="https://www.amamiyuki.top:443/web/teaTemplate" type="primary" download target="_blank">下载模板</el-link>
            </div>
        </el-upload>
        <UploadResponse></UploadResponse>
    </div>
</template>
<script>
    import UploadResponse from './UploadResponse.vue';
    export default {
        name: 'BatchAdd',
        data() {
            return {
                fileList: [],
                uploading: true
            }
        },
        components: {
            UploadResponse
        },
        methods: {
            toRemove() {
                this.uploading = true
            },
            uploadSuccess(response, val) {
                console.log('上传', response, val);
                let obj = {
                    response: response,
                    val: val
                }
                this.$bus.$emit('uploadSuccess', obj)
                this.$refs.upload.clearFiles()
                this.uploading = true
            },
            uploadError(err) {
                console.log(err);
                this.$message({
                    message: '上传失败',
                    type: 'info'
                })
                this.$refs.upload.clearFiles()
                this.uploading = true
            },
            toUpload(val) {
                let fd = new FormData()
                fd.append('file', val.file)
                axios({
                    method: 'POST',
                    url: '/teaUpload',
                    withCredentials: true,
                    data: fd,
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }).then((result) => {
                    this.uploadSuccess(result.data, val)
                }).catch((err) => {
                    this.uploadError(err)
                });
            }
        },
    }
</script>
<style scoped>

</style>